<template>
  <div>
    <el-table
      :data="
        tableData.filter(
          data =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="Date" prop="date"> </el-table-column>
      <el-table-column label="Name" prop="name"> </el-table-column>
      <el-table-column label="Name" prop="address"> </el-table-column>
      <el-table-column align="right">
        <template slot="header">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            clearable
          />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 编辑对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div style="width: 200px">
        <el-input v-model="currentName" size="medium" />
      </div>
      <div style="width: 200px">
        <el-input v-model="currentDate" size="medium" />
      </div>
      <div style="width: 200px">
        <el-input v-model="currentAddress" size="medium" />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'pageTwo',
  data () {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '王小龙',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小兔',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小马',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      search: '',
      dialogVisible: false,
      currentName: '', // 用于存储当前正在编辑的行的 name
      currentDate: '', //  用于存储当前正在编辑的行的 data
      currentAddress: '',
      currentRowIndex: null // 用于存储当前正在编辑的行的索引
    }
  },
  methods: {
    handleEdit (index, row) {
      this.currentName = row.name // 设置当前 name 到对话框的输入框
      this.currentDate = row.date // 设置当前 date 到对话框的输入框
      this.currentAddress = row.address // 设置当前 address 到对话框的输入框
      this.currentRowIndex = index // 保存当前行的索引
      this.dialogVisible = true
    },
    saveEdit () {
      // 检查输入字段是否为空
      if (
        this.currentName.trim() === '' ||
        this.currentDate.trim() === '' ||
        this.currentAddress.trim() === ''
      ) {
        // 输入字段为空，显示提示信息，不关闭对话框
        this.$message({
          type: 'warning',
          message: '名称不能为空'
        })
      } else {
        // 输入字段不为空，更新 tableData 中对应的数据项
        if (this.currentRowIndex !== null) {
          this.tableData[this.currentRowIndex].name = this.currentName
          this.tableData[this.currentRowIndex].date = this.currentDate
          this.tableData[this.currentRowIndex].address = this.currentAddress
        }
        // 关闭对话框
        this.dialogVisible = false
      }
    },
    handleDelete (index) {
      // 确认要删除的行
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 从数组中移除对应的项
          this.tableData.splice(index, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style></style>
